<template>
	<div id="posttree">
		<div style="width: 300px; height: 600px; border: 2px solid black; float: left;">
			<!-- 选择框 -->
			<div class="search-input" style="margin-top:20px ;margin-left: 30px;">
				<select placeholder="--请选择角色--">
					<option label="系统管理员" value="1"></option>
					<option label="路线管理员" value="0"></option>
					<option label="巡检员" value="1"></option>
					<option label="消缺员" value="0"></option>
				</select>
			</div>
			<!-- 树 -->
			<div id="posttree" style="margin-left: 20px; margin-top: 10px;" v-for="item in props" :key="item.id">
				<el-tree :data="[item]" show-checkbox node-key="id" :props="defaultProps" :check-strictly="true"
					@check-change="handleCheckChange" @node-click="handleNodeClick"></el-tree>
				<div v-if="expandedParentId === item.id">
					<el-tree ref="childTree" style="margin-left: 20px;" v-for="item2 in item.psFunctionList"
						:key="item2.id" :data="[item2]" :check-strictly="true" show-checkbox node-key="id">
						{{ item2.functionname }}
					</el-tree>
				</div>
			</div>
			<!-- 点击添加 -->
			<div class="search-button" style="margin-top: 100px; margin-left: 20px;">
				<el-button @click.prevent="caidan()" type="primary">添加一级菜单</el-button>
			</div>
		</div>
		<!-- 添加节点 -->
		<div id="myDiv"
			style="border: 1px solid black; width: 800px; height: 598px; margin-left: 400px;margin-top: 20px; display: none;">
			<div style="margin-left: 100px; margin-top: 50px;">
				<h1>新建菜单节点</h1>
				<div style="width: 600px; height: 1px; background-color: black;"></div>
				<br />
				<div>
					父节点：<span>请选择父节点</span>
				</div>
				<br />
				<br />
				<div>
					功能编码：<input type="text" />
				</div>
				<br />
				<br />
				<div>
					功能名称：<input type="text" />
				</div>
				<br />
				<br />
				<div>
					功能URL：<input type="text" />
				</div>
				<br />
				<br />
				<br />
				<br />
				<div>
					<button @click="adds()">保存</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<button @click="fanhui()">返回</button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "posttree",
		data() {
			return {
				props: [],
				defaultProps: {
					children: "children",
					label: "functionname"
				},
				expandedParentId: null
			};
		},
		methods: {
			handleCheckChange(data, checked, indeterminate) {
				// 更新 checkdata 变量
				this.checkdata = data.map(item => item.id);
			},
			tree() {
				this.axios
					.get("http://localhost:8080/ps-function/selectPage", {
						params: {},
						headers: {}
					})
					.then(res => {
						this.props = res.data.datamap.functions;
						console.log(this.props)
					})
					.catch(err => {
						console.log(err);
					});
			},
			caidan() {
				const mydiv = document.getElementById("myDiv");
				mydiv.style.display = "block";
			},
			fanhui() {
				const mydiv = document.getElementById("myDiv");
				mydiv.style.display = "none";
			},
			handleCheckChange(data, checked, indeterminate) {
				// 如果是父类节点被勾选,则遍历其子类节点并更新它们的勾选状态
				if (this.expandedParentId === data.id) {
					this.$nextTick(() => {
						this.$refs.childTree.forEach(tree => {
							tree.setChecked(data.id, checked, false)
						})
					})
				}
			},
			handleNodeClick(data, node, component) {
				this.expandedParentId = data.id
			}
		},
		mounted() {
			this.tree();
		}
	};
</script>

<style>
</style>